<script setup>
  import CategorySelect from "@/components/Consume/CategorySelect.vue";
  import {addAssetCategory, updateAssetCategory} from "./api.js";

  const { proxy } = getCurrentInstance();

  const form = ref();

  const title = ref('编辑');
  const openFlag = ref(false);
  // 初始的表单数据
const formDataInit = {
  parentId: null, 
  parentNumber: null, 
  name: null, 
  orderNo: 1, 
  remark: null 
};

const rules = {
  parentId: {
    required: true,
    message: "请选择父子类",
    trigger: "blur"
  },
  name: {
    required: true,
    message: "分类名称不能为空",
    trigger: "blur"
  },

}

  const formData = reactive({...formDataInit});
  let isEdit = false;

  const emit = defineEmits(['sub']);

  function reset() {
    Object.assign(formData, formDataInit);
  }

  function open({parentNode, row}) {
    reset();
    if (row) {
      Object.assign(formData, row);
      isEdit = true;
    } else {
      isEdit = false;
    }
    formData.parentId = parentNode.id;
    formData.parentNumber = parentNode.number;
    openFlag.value = true;

  }

  function close() {
    openFlag.value = false;
  }

  function submitForm() {
    form.value.validate(valid => {

      if (valid) {
        if (isEdit) {
          updateAssetCategory(formData).then(() => {
            proxy.$modal.msgSuccess("修改成功");
            emit('sub');
            close();

          });
        } else {
          addAssetCategory(formData).then(() => {
            proxy.$modal.msgSuccess("新增成功");
            emit('sub');
            close();
          });
        }
      }
    });
  }

  defineExpose({
    open
  })

</script>

<template>
  <div>
    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" v-model="openFlag" width="50%" append-to-body>
      <el-form ref="form" :model="formData" :rules="rules" label-width="108px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="父分类" prop="parentId">
              <category-select v-model="formData.parentId"></category-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="分类名称" prop="name">
              <el-input v-model.trim="formData.name" placeholder="请输入分类名称" />
            </el-form-item>
          </el-col>
        
            <el-col :span="12">
              <el-form-item label="显示排序" prop="orderNo">
                <el-input-number v-model.trim="formData.orderNo" :min="0" placeholder="请输入" />
              </el-form-item>
            </el-col>
      

        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" style="width: 100%;" v-model="formData.remark" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="close">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">

</style>